<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>应收台账详情编辑</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=f5a12a1d">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        .model-picker-input {
            opacity: 0 !important;
            top: -9999px;
            left: -9999px;
            position: absolute;
        }

        .model-picker-span {
            position: relative;
            display: block;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            border-bottom: 1px solid #ccc;
            background-color: #fff;
            color: #ccc;
            cursor: pointer;
        }

        .model-picker-span > .placeholder {
            color: #aaa;
        }

        .model-picker-span > .arrow {
            position: absolute;
            top: 50%;
            right: 8px;
            width: 10px;
            margin-top: -3px;
            height: 5px;
            background: url(../images/drop-arrow.png) -10px -25px no-repeat;
        }

        .model-picker-span.focus,
        .model-picker-span.open {
            border-bottom-color: #46A4FF;
        }

        .model-picker-span.open > .arrow {
            background-position: -10px -10px;
        }

        .model-picker-span > .title > span {
            color: #333;
            padding: 5px;
            border-radius: 3px;
        }

        .model-picker-span > .title > span:hover {
            background-color: #f1f8ff;
        }

        .model-picker-dropdown {
            position: absolute;
            width: 315px;
            left: -9999px;
            top: -9999px;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            z-index: 999999;
            display: none;
            min-width: 200px;
            margin-bottom: 20px;
            margin-top: 5px;
        }

        .model-select-wrap {
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
        }

        .model-select-tab {
            border-bottom: 1px solid #ccc;
            background: #f5f5f5;
            /*font-size: 13px;*/
        }

        .model-select-tab > a {
            display: inline-block;
            padding: 4px 20px;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid transparent;
            color: #4D4D4D;
            text-align: center;
            outline: 0;
            text-decoration: none;
            cursor: pointer;
            /*font-size: 14px;*/
            margin-bottom: -1px;
        }

        .model-select-tab > a.active {
            background: #fff;
            border-bottom: 1px solid #fff;
            color: #46A4FF;
        }

        .model-select-tab > a:first-child {
            border-left: none;
        }

        .model-select-tab > a:last-child.active {
            border-right: 1px solid #ccc;
        }

        .model-select-content {
            width: 100%;
            min-height: 50px;
            background-color: #fff;
            padding: 5px 5px;
        }

        .model-select {
            /*font-size: 16px;*/
        }

        .model-select dl {
            line-height: 2;
            clear: both;
            padding: 3px 0;
            margin: 0;
            max-height: 200px;
            overflow-y: scroll;
        }

        .model-select dt {
            position: absolute;
            width: 2.5em;
            font-weight: 500;
            text-align: right;
            line-height: 2;
        }

        .model-select dd {
            margin-left: 0;
            line-height: 2;
        }

        .model-select.province dd {
            margin-left: 3em;
        }

        .model-select a {
            display: inline-block;
            padding: 0 10px;
            outline: 0;
            text-decoration: none;
            white-space: nowrap;
            margin-right: 2px;
            color: #333;
            cursor: pointer;
        }

        .model-select a:hover,
        .model-select a:focus {
            background-color: #f1f8ff;
            border-radius: 2px;
            color: #46A4FF;
        }

        .model-select a.active {
            background-color: #46A4FF;
            color: #fff;
            border-radius: 2px;
        }

        .table-detail input[type=text] {
            padding-left: 0 !important;
        }

        td {
            color: #2a8cec;
        }

        td.td-title, td select, td .filename, td.td-module {
            color: #333;
        }

        select {
            color: rgb(42, 140, 236) !important;
            background: #fff;
        }

        .table-detail td {
            /*font-size: 16px;*/
            line-height: 35px;
            height: 35px;
            border-right: 1px solid #cbcbcb;
            border-bottom: 1px solid #cbcbcb;
        }

        .table-detail td.td-title {
            line-height: 1.5;
            background: #Fff;
        }

        .table-detail td.td-row3 {
            height: 70px;
            line-height: 20px;
            max-height: 70px;
            overflow: hidden;
            position: relative;
        }

        .yuying {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 20px;
            height: 20px;
            background: url("/dist/img/yuyin.png");
            background-size: cover;
            cursor: pointer;
        }

        input {
            text-align: left !important;
        }

        .table-detail td.td-value {
            text-align: center !important;
            padding-left: 4px !important;
            /*font-size: 16px !important;*/
        }

        .btn-group-xs > .btn, .btn-xs {
            padding: 1px 5px;
            /*font-size: 16px;*/
            line-height: 1.5;
            border-radius: 3px;
        }

        .table-detail textarea {
            height: 60px;
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            resize: none;
            line-height: 20px;
            padding-top: 2px !important;
            padding-left: 6px;
        }

        .td-row3 span {
            max-height: 60px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            text-align: left;

        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .td-module td {
            color: #333;
            font-weight: bold;
        }

        .table-detail {
            border-left: 1px solid #cbcbcb;
            border-top: 1px solid #cbcbcb;
        }

        .table-detail .td-module {
            background-color: #ebebeb;
        }
    </style>
</head>
<body>
<iframe id="ifAttach" style="display:none"></iframe>
<div class="div-td-content-more"><i></i></div>
<section class="content" id="app" v-cloak style="padding:0px;">
    <!--<div class="north" style="height:40px;"></div>-->
    <!--<h4 class="text-center" class="margin-top:10px;" >商务条件预申请</h4>-->
    <div class="center" style="overflow:auto;overflow-x:hidden;">
        <table class="table-detail">
            <tr class="td-module">
                <td colspan="4">基本信息</td>
            </tr>
            <tr>
                <td class="td-title" style="width: 25%;">实际购车人</td>
                <td class="td-value" style="width: 25%;">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>马江帆</span>
                </td>
                <td class="td-title" style="width: 25%;">实际购车人电话</td>
                <td class="td-value" style="width: 25%;">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>17835267035</span>
                </td>
            </tr>
            <tr class="td-module">
                <td colspan="4">设备信息</td>
            </tr>
            <tr>
                <td class="td-title">债权经理</td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span  v-else>张三</span>
                </td>
                <td class="td-title">数据专员</td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span  v-else>张三</span>
                </td>
            </tr>
        </table>
        <table class="table-detail">
            <tr>
                <td colspan="7" class="td-module no-print">
                    <span style="margin-left:380px">首付款跟踪</span>
                    <span class="span-a-btn" style="margin-left:280px" >
                        <span v-if="pageType!='look'">
                        <a href="javascript:void(0);" class="a-btn" @click="addRow()">添加一行</a>
                        <a href="javascript:void(0);" @click="delRow()">删除一行</a>
                        </span>
                    </span>
                </td>
            </tr>
            <tr>
            <td class="td-title" style="width: 14.3%;">合同还款日期</td>
            <td class="td-title" style="width: 14.3%;">约定首付金额</td>
            <td class="td-title" style="width: 14.3%;">约定利息</td>
            <td class="td-title" style="width: 14.3%;">实际还款日期</td>
            <td class="td-title" style="width: 14.3%;">还款金额</td>
            <td class="td-title" style="width: 14.3%;">逾期罚息</td>
            <td class="td-title" style="width: 14.3%;">剩余欠款</td>
            </tr>
            <tr>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>2018-07-11</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>20万</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>10万</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>2018-07-11</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>20万</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>20万</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>20万</span>
                </td>
            </tr>
            <tr>
                <td colspan="7" class="td-module no-print">
                    <span style="margin-left:380px">融资款跟踪</span>
                    <span class="span-a-btn" style="margin-left:280px" >
                        <span v-if="pageType!='look'">
                        <a href="javascript:void(0);" class="a-btn" @click="addRow()">添加一行</a>
                        <a href="javascript:void(0);" @click="delRow()">删除一行</a>
                        </span>
                    </span>
                </td>
            </tr>
            <tr>
                <td class="td-title">合同还款日期</td>
                <td class="td-title">约定还款金额</td>
                <td class="td-title">约定利息</td>
                <td class="td-title">实际还款日期</td>
                <td class="td-title">还款金额</td>
                <td class="td-title">逾期罚息</td>
                <td class="td-title">剩余欠款</td>
            </tr>
            <tr>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>20</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>20</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>2018-07-11</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>20万</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>20万</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>2018-07-11</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>20万</span>
                </td>
            </tr>
        </table>
        <table class="table-detail">
            <tr class="td-module">
                <td colspan="4">客户总欠款合计</td>
            </tr>
            <tr>
                <td class="td-title" style="width: 25%;">首付款总欠款</td>
                <td class="td-title" style="width: 25%;">融资总欠款</td>
                <td class="td-title" style="width: 25%;">客户总欠款合计</td>
                <td class="td-title" style="width: 25%;">累计还款金额</td>
            </tr>
            <tr>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>2345</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>2345</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>2345</span>
                </td>
                <td class="td-value">
                    <input type="text" v-if="pageType=='edit'"/>
                    <span v-else>2345</span>
                </td>
            </tr>
        </table>
        <div class="south no-print" style="height:50px;line-height:50px;text-align:center;"><input type="button" style="margin-left:20px;" value="保存" class="btn btn-primary btn-xs"></div>
        <!--@click="goBack"-->

    </div>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=63aed32f"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/dist/js/pages/system/systemService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/commonService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/changeMoneyToChinese.js"></script>
<script type="text/javascript" src="/dist/plugins/print/print.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script>
    $(function () {
        $("body").on("click", ".td-row3 span", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }
    var api = '';
    if (IsPC()) {
        api = frameElement.api, W = api.opener;
    } else {
        function getCurrentUser() {
            var args = new Object();
            var query = location.href;
            var pairs = query.split("&"); //www.cxybl.com break at ampersand
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('='); // look for "name=value"
                if (pos == -1) continue; // if not found, skip
                var argname = pairs[i].substring(0, pos); // extract the name
                var pos1 = argname.indexOf('?');
                if (pos1 > -1) {
                    argname = argname.substring(pos1 + 1);
                }
                var value = pairs[i].substring(pos + 1); // extract the value
                value = decodeURIComponent(value); // decode it, if needed
                args[argname] = value; // store as a property
            }
            var ss = args.valueOf(0);
            obj = args;
            return args;
        }

        //获取url的参数
        function getUrlParamObj() {
            var args = new Object();
            var query = location.href;
            var pairs = query.split("&"); //www.cxybl.com break at ampersand
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('='); // look for "name=value"
                if (pos == -1) continue; // if not found, skip
                var argname = pairs[i].substring(0, pos); // extract the name
                var pos1 = argname.indexOf('?');
                if (pos1 > -1) {
                    argname = argname.substring(pos1 + 1);
                }
                var value = pairs[i].substring(pos + 1); // extract the value
                value = decodeURIComponent(value); // decode it, if needed
                args[argname] = value; // store as a property
            }
            var ss = args.valueOf(0);
            obj = args;
            return args;
        }

        $.wyui.page.urlParams = getUrlParamObj()
    }


    var app = new Vue({
            el: '#app',
            data: {
                currentUser: getCurrentUser(),
                pageType: $.wyui.page.urlParams.pageType
            },
            methods: {
                convertAuditFlagToName: function (flage) {
                    if (flage == 1) {
                        return "已通过";
                    }
                    else if (flage == 2) {
                        return "已驳回";
                    }
                    else if (flage == 0) {
                        return "待审核";
                    }
                    else {
                        return "-";
                    }
                }
            }
            ,
            mounted: function () {
//                var that = this;
//                this.pageType = $.wyui.page.urlParams.pageType;
//                //编辑
//                that.getValue();
//                if (parseInt($.wyui.page.urlParams.id) > 0) {
//                    $.wyui.postMethod('/business/getById.json', {id: $.wyui.page.urlParams.id}, function (data) {
//
//                        that.business = data;
//                        console.log(data);
//                    });
//                }
            }
        })
    ;
    $(function () {
        $("#txtParent").autoComplete({
            url: server.ip + "/weekPlan/getNameAndTel.json",
            render: function (r, panel) {
                for (var i = 0; i < r.length; i++) {
                    $("<li></li>").data("autoComplete",
                        r[i]).html("<a>" + r[i].customerName + "&nbsp;&nbsp;&nbsp;" +
                        "(" + "&nbsp;" + r[i].customerTel + ") " + "</a>")
                        .appendTo(panel);
                }
            },
            selected: function (r) {
                console.log(r);
                app.business.main.customerId = r.customerId;
                app.business.main.customerName = r.customerName;
                app.business.main.customerTel = r.customerTel;
                app.business.main.customerCredit = r.customerCredit;
                app.business.main.competitorCondition = r.competitorCondition;
                app.business.main.existingDevice = r.existingDevice;
                return false;
            },
            extraParams: {createUserId: getCurrentUser().id},
            height: 210,
            width: 300
        });
    });
</script>
</body>
</html>